<template>
  <div class="admin-layout">
    <Tabs v-model:active="page">
      <Tab title="用户管理" to="/admin/user" @click="handleClick(0)" />
      <Tab title="订单管理" to="/admin/order" @click="handleClick(1)" />
      <Tab title="应用配置" to="/admin/config" @click="handleClick(2)" />
      <Tab title="订单转移" to="/admin/trans" @click="handleClick(3)" />
      <Tab title="提现审核" to="/admin/withdraw" @click="handleClick(4)" />
    </Tabs>
    <RouterView />
  </div>
</template>

<script setup lang="ts">
import { Tab, Tabs } from 'vant';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';

const page = ref<number>(0);
const route = useRoute();
const routeMap: Record<string, number> = {
  '/admin/user': 0,
  '/admin/order': 1,
  '/admin/config': 2,
  '/admin/trans': 3,
  '/admin/withdraw': 4,
};

onMounted(() => {
  page.value = routeMap[route.path as string];
});

const handleClick = (index: number) => {
  page.value = index;
};
</script>
